// 01: 导入Link组件
import { Link, Route, NavLink, withRouter, Redirect, Switch } from 'react-router-dom';
import '../assets/mynav.css';
import React, { Component } from 'react';
import Home from '../views/router-view/Home';
import Category from '../views/router-view/Category';
import Cat from '../views/router-view/Cat';
import Mine from '../views/router-view/Mine';
import Notfind from '../views/router-view/Notfind';

// Link或NavLink就相当于 Router-link
// Route 相当于 routes(路由规则数组) + Router-view

// 路由传值
// 01: 直接在地址上拼接参数
// 02: 动态路由的方式 restful 风格传值 例如: home/100/200 需要配合 path 地址
// 03: 以对象的形式进行传值 其中state 方式为隐式传值, 一般页面埋点使用


// 路由知识点:
// 01: 路由嵌套: 在一级路由的组件中添加<Route path='/一级路由/二级路由' component={组件名}></Route>
// 02: 路由重定向: 在一级或二级等路由中使用重定向 <Redirect from='' to=''> </Redirect>
// 03: Switch组件: 一般用来包裹Route 路由规则的,目的只匹配一个路由,匹配原则从上到下依次匹配,一但符合条件,停止匹配
// 04: 404路由: 需要在对应的一级或二级路由中设置<Route component={组件名}></Route>
// 不需要设置path,一定需要配合Switch 使用


class Index extends Component {
    state = {
        id: 100
    }
    render() {
        return (
            <div>
                {/* 这里定义Link组件 -声明式导航 */}
                {/* <NavLink to='/home?id=10&age=20'>首页</NavLink>
                <NavLink to={'/category'}>分类</NavLink>
                <NavLink to={{ pathname: '/cat', search: 'name=小强&age=20', state: { username: "旺财", age: 8 } }}>购物车</NavLink>
                <NavLink to='/mine'>我的</NavLink> */}

                {/* 编程式导航--通过事件实现 */}
                <p>
                    <span onClick={this.gotopage.bind(this, '/home')}>首页</span>
                    <span onClick={this.gotopage.bind(this, '/category')}>分类</span>
                    <span onClick={this.gotopage.bind(this, '/cat')}>购物车</span>
                    <span onClick={this.gotopage.bind(this, '/mine')}>我的</span>
                </p>
                <Switch>
                    <Route path='/home' component={Home} exact></Route>
                    <Route path='/category/:id?' component={Category} exact></Route>
                    <Route path='/cat' component={Cat} exact></Route>
                    {/* 注意:严格模式, 不能给有二级路由的一级路由添加,否则他只匹配一级,不匹配二级路由 */}
                    <Route path='/mine' component={Mine} ></Route>
                    {/* 使用重定向路由 */}
                    <Redirect from='/' to='/home' exact></Redirect>
                    {/* 配置404路由: */}
                    <Route component={Notfind}></Route>
                </Switch>
            </div>
        );
    };

    gotopage(url) {
        console.log(url);
        // 在react中使用this.props.history.push(url)
        // this.props.history.push(`${url}?id=${100}`)
        // 编程式导航传值
        //方式1: url?key=val&key=val
        // 方式同编程式导航 
        // this.props.history.push(`${url}/${100}`)
        this.props.history.push({ pathname: url, search: '', state: { name: "王广宇", age: 15 } })
    }
}

// withRouter 是一个高阶组件, 作用: 可以实现给被包裹的组件添加路由相关属性到组件自身的props 属性上
// 为什么使用 withRouter, 因为当某一个组件不是通过路由跳转过来的显示的,所以当前组件就没有路由相关的属性
// 反之, 如果当前组件是通过路由跳转过来的, 那么就有 history, match ,loaction 三个属性
export default withRouter(Index);
